<template>
	<view class="page">
		<view class="custom_wifi_header">vue-wifi</view>
		<view class="custom_wifi_list">
			<view class="custom_wifi_list_item" v-for="(wifi, index) in wifiList" v-if="wifiList.length > 0" :class="connect.active.index === index ? 'on' : ''">
				<view
					class="custom_wifi_list_item_info"
					@click="connectWIFIClickHandle"
					:data-ssid="wifi.SSID"
					:data-bssid="wifi.BSSID"
					:data-secure="wifi.secure"
					:data-frequency="wifi.frequency"
					:data-index="index"
				>
					<view class="custom_wifi_list_item_content title">
						<view class="title">
							<view class="iconfont icon-wifi"></view>
							{{ wifi.SSID || 'Unknown' }}
						</view>
						<view class="content iconfont" :class="wifi.secure ? 'icon-secure' : 'icon-secure nosecure'"></view>
					</view>
					<!-- <view class="custom_wifi_list_item_content bssid">{{ wifi.BSSID }}</view> -->
					<view class="custom_wifi_list_item_content signalStrength">信号强度：{{ signalStrength(wifi.signalStrength) }}</view>
				</view>
				<view class="custom_wifi_list_item_content password" v-if="connect.active.index !== index && connect.show && active === index">
					<input v-model="connect.options.password" type="password" placeholder="请输入连接密码" />
					<view class="button" @click="passwordInputHandle" :data-index="index">
						<view v-if="isLoading" class="on"></view>
						连接
					</view>
				</view>
				<!-- <view class="custom_wifi_list_item_content edit" v-if="connect.active.index === index">
					<view class="button" @click="closeWifiClickHandle" :data-index="index">
						<view v-if="isLoading" class="on"></view>
						关闭
					</view>
				</view> -->
			</view>
			<view class="custom_wifi_list_item no" v-if="wifiList.length <= 0">无wifi</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'INIT',
			wifiList: [],
			connect: {
				isConnect: false,
				options: {
					SSID: '',
					BSSID: '',
					password: ''
				},
				active: { SSID: '', BSSID: '', password: '', index: -1 },
				show: false
			},
			network: {
				isConnect: false,
				networkType: 'none'
			},
			active: -1
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: 'VUE-WIFI'
		});
		wx.onGetWifiList(this.onGetWifiList);
		wx.onWifiConnected(this.onWifiConnected);
		wx.offWifiConnected(this.offWifiConnected);
		uni.onNetworkStatusChange(this.onNetworkStatusChange);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		this.active = -1;
		this.status === 'INIT' ? this.init() : this.getWIFIList();
	},
	watch: {
		'network.isConnect'(v) {
			!v &&
				uni.showToast({
					title: '断开网络，请连接网络重试！',
					icon: 'none'
				});
		}
	},
	methods: {
		extend(a, b) {
			a = a || {};
			for (let n in b) a[n] = b[n];
			return a;
		},
		closeWifiClickHandle() {
			
		},
		onNetworkStatusChange(res) {
			console.log('onNetworkStatusChange', res);
			this.network.isConnect = res.isConnected;
			this.network.networkType = res.networkType;
			res.isConnected === true && uni.startPullDownRefresh();
		},
		offWifiConnected(res) {
			console.log(res);
			this.status = 'OFFCONNECT';
			this.connect.active = {};
			this.connect.isConnect = false;
		},
		onWifiConnected(res) {
			this.status = 'CONNECT';
			this.connect.isConnect = true;
			console.log(res);
		},
		error(code) {
			switch (parseFloat(code)) {
				case 12000:
					return '未先调用 startWifi 接口';
				case 12001:
					return '当前系统不支持相关能力';
				case 12002:
					return 'Wi-Fi 密码错误';
				case 12003:
					return '连接超时';
				case 12004:
					return '重复连接 Wi-Fi';
				case 12005:
					return '特有，未打开 Wi-Fi 开关';
				case 12006:
					return '未打开 GPS 定位开关';
				case 12007:
					return '用户拒绝授权链接 Wi-Fi';
				case 12008:
					return '无效 SSID';
				case 12009:
					return '系统运营商配置拒绝连接 Wi-Fi';
				case 12010:
					return '系统其他错误，需要在 errmsg 打印具体的错误原因';
				case 12011:
					return '应用在后台无法配置 Wi-Fi';
				case 12013:
					return '系统保存的 Wi-Fi 配置过期，建议忘记 Wi-Fi 后重试';
			}
		},
		signalStrength(v) {
			if (-v < -50) {
				return '强';
			} else if (-v < -50 && -v >= -70) {
				return '较强';
			} else if (-v < -70 && -v >= -80) {
				return '较弱';
			} else if (-v < -80 && -v >= -100) {
				return '弱';
			} else {
				return '未知';
			}
		},
		passwordInputHandle(e) {
			console.log('1', this.connect.options);
			let that = this;
			if (this.connect.options.password === '') {
				uni.showToast({
					title: '连接密码不能为空！',
					icon: 'none'
				});
				return;
			}
			/* uni.showLoading({
				title: '正在连接中...',
				mask: true,
				success() { */
			if (!that.isLoading) {
				that.isLoading = true;
				wx.connectWifi({
					SSID: that.connect.options.SSID,
					BSSID: that.connect.options.BSSID,
					password: that.connect.options.password,
					success(res) {
						console.log('2', res);
						//uni.hideLoading();
						if (res.errCode === 0) {
							uni.showToast({
								title: '连接成功',
								icon: 'none'
							});
							that.connect.show = false;
							that.connect.active = {
								SSID: that.connect.options.SSID,
								BSSID: that.connect.options.BSSID,
								password: that.connect.options.password,
								index: e.currentTarget.dataset.index
							};
						} else {
							uni.showToast({
								title: that.error(res.errCode) || '连接失败，请重试！',
								icon: 'none'
							});
						}
					},
					fail(res) {
						console.log('3', res);
						//uni.hideLoading();
						uni.showToast({
							title: that.error(res.errCode) || '连接失败，请重试！',
							icon: 'none'
						});
						//that.connect.options.password = '';
					},
					complete() {
						that.isLoading = false;
						//uni.stopPullDownRefresh();
					}
				});
			}
			/* 
				},
				fail() {
					uni.showToast({
						title: '连接失败，请重试！',
						icon: 'none'
					});
				}
			}); */
		},
		connectWIFIClickHandle(e) {
			this.connect.options = this.extend(
				{
					SSID: '',
					BSSID: '',
					password: ''
				},
				{
					SSID: e.currentTarget.dataset.ssid,
					BSSID: e.currentTarget.dataset.bssid,
					password: ''
				}
			);
			console.log(this.connect);
			this.active = e.currentTarget.dataset.index;
			this.connect.show = true;
		},
		init() {
			let that = this;
			uni.getNetworkType({
				success: function(res) {
					console.log(res);
					if (/none/.test(res.networkType)) {
						that.network.isConnect = false;
						that.network.networkType = res.networkType;
						uni.showToast({
							title: '目前断网, 请开启wifi开关重试',
							icon: 'none'
						});
					} else {
						that.network.isConnect = true;
						that.network.networkType = res.networkType;
						that.startWifi();
					}
				}
			});
		},
		getConnectWifi(filter) {
			uni.showLoading({
				title: '正在连接中...',
				mask: true,
				success() {
					wx.getConnectedWifi({
						success(res) {
							filter && filter(res.wifi);
						},
						fail(res) {
							uni.showToast({
								title: '无已连接的wifi',
								icon: 'none'
							});
						},
						complete() {
							uni.hideLoading();
						}
					});
				}
			});
		},
		startWifi() {
			let that = this;
			/* uni.showLoading({
				title: '启动中...',
				mask: true,
				success() { */
			wx.startWifi({
				success(res) {
					console.log(res);
					if (res.errCode === 0) {
						that.status = 'START';
						//uni.hideLoading();
						uni.showToast({
							title: '启动wifi成功',
							icon: 'none'
						});
						that.getWIFIList();
					}
				},
				fail(res) {
					//uni.hideLoading();
					uni.showToast({
						title: that.error(res.errCode) || '启动wifi失败, 请开启wifi开关重试',
						icon: 'none'
					});
					console.log(res);
				},
				complete() {
					uni.stopPullDownRefresh();
				}
			}); /* 
				}
			}); */
		},
		getWIFIList() {
			let that = this;
			uni.showLoading({
				title: '获取中...',
				mask: true,
				success() {
					wx.getWifiList({
						success(res) {
							uni.hideLoading();
							console.log(res);
							that.status = 'GETLIST';
							uni.showToast({
								title: '获取wifi列表成功',
								icon: 'none'
							});
						},
						fail(res) {
							uni.hideLoading();
							console.log(res);
							uni.showToast({
								title: that.error(res.errCode) || '获取wifi列表失败, 请开启wifi开关重试',
								icon: 'none'
							});
						},
						complete() {
							uni.stopPullDownRefresh();
						}
					});
				}
			});
		},
		onGetWifiList(res) {
			let that = this;
			this.wifiList = res.wifiList;
			this.getConnectWifi(res => {
				let len = that.wifiList.length;
				console.log(len);
				for (let i = 0; i < len; i++) {
					let item = that.wifiList[i];
					console.log('item:', item);
					if (item.SSID === res.SSID && item.BSSID === res.BSSID && item.secure === res.secure) {
						that.connect.active = {
							SSID: item.SSID,
							BSSID: item.BSSID,
							password: '',
							index: i
						};
						break;
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
.page {
	font-size: 28rpx;
	padding: 0 0 160rpx 0;
	.custom_wifi_header {
		padding: 60rpx 20rpx;
		text-align: center;
	}
	.custom_wifi_list {
		.custom_wifi_list_item {
			padding: 20rpx 30rpx;
			margin: 10rpx 30rpx;
			border-radius: 10rpx;
			border: 2rpx #efefef solid;
			&.no {
				text-align: center;
			}
			&.on {
				background-color: #f0ad4e;
				color: #333333;
				.custom_wifi_list_item_content{
					&.signalStrength{
						color:#333333;
					}
				}
			}
			.custom_wifi_list_item_content {
				display: flex;
				.title {
					flex: 1;
					font-size: 40rpx;
					overflow: hidden;
					.iconfont {
						display: inline;
						margin: 0 10rpx 0 0;
						font-size: 24rpx;
						line-height: 40rpx;
					}
				}
				.content {
					font-size: 40px;
					width: 80rpx;
					&.nosecure {
						color: #efefef;
					}
				}
				&.title {
				}
				&.bssid {
				}
				&.secure {
				}
				&.signalStrength {
					padding: 10rpx 0;
					font-size: 24rpx;
					color: #c0c0c0;
				}
				&.password {
					display: flex;
					padding: 30rpx 10rpx;
					input {
						padding: 20rpx;
						border-radius: 10rpx;
						border: 2rpx #efefef solid;
						display: inline-block;
						font-size: 28rpx;
						margin: 10rpx 0;
						flex: 1;
					}
					.button {
						min-width: 120rpx;
						padding: 10rpx 20rpx;
						margin: 10rpx 0 10rpx 10rpx;
						border-radius: 10rpx;
						border: 2rpx #efefef solid;
						font-size: 28rpx;
						text-align: center;
						line-height: 60rpx;
						&.on {
							animation: loading_rotate 2s linear infinite;
							display: inline;
							margin: 0 10rpx 0 0;
							font-size: 28rpx;
						}
					}
				}
				&.edit {
					.button {
						padding: 10rpx 20rpx;
						margin: 10rpx 0 10rpx 10rpx;
						border-radius: 10rpx;
						border: 2rpx #efefef solid;
						font-size: 28rpx;
						text-align: center;
						line-height: 60rpx;
						display: inline;
						&.on {
							animation: loading_rotate 2s linear infinite;
							display: inline;
							margin: 0 10rpx 0 0;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
}
@keyframes loading_rotate {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
</style>
